@import '~components/constants.scss';

.taskModal {
  .title {
    font-size: 22px;
    margin-bottom: 8px;
    .text {
      margin-top: 8px;
      font-size: 12px;
      font-weight: normal;
      color: $grey_dark;
    }
  }

  .date.subtitle,
  .location.subtitle,
  .reminders.subtitle {
    color: $grey_dark;
  }

  .date_and_type {
    display: flex;
    .select {
      min-width: 25%;
      flex: 1;
      max-width: 140px;
      margin-right: 8px;
    }
    .date_selector_full {
      & > div {
        vertical-align: top;
      }
    }
  }

  .participants > .menu-list {
    padding: 0;
    margin: 0 -16px;
    width: calc(100% + 32px);
  }

  .task_type {
    display: inline-block;
    height: 32px;
    padding: 0 8px;
    margin-right: 8px;
    line-height: 32px;
    vertical-align: middle;
    background: $white;
    border-radius: var(--default-border-radius);
    border: 1px solid $grey_light;
    box-sizing: border-box;
    font-size: 14px;
    padding-left: 4px;
    .icon-unicon {
      color: $grey_dark;
    }
  }

  .checklist {
    .progress_bar_container {
      display: flex;
      margin-bottom: 8px;
      span {
        width: 40px;
        font-size: 12px;
        color: $grey_dark;
      }
      .progress_bar {
        background: $grey_background;
        border-radius: var(--default-border-radius);
        height: 8px;
        flex: 1;
        overflow: hidden;
        position: relative;
        top: 4px;
        .progress {
          background: $primary;
          position: absolute;
          top: 0;
          left: 0;
          height: 8px;
          transition: width 0.2s;
        }
      }
    }

    .checklist_element_editor {
      flex: 1;
      margin-top: -4px;
    }

    .checklist-row {
      min-height: 24px;
      margin-bottom: 0px;
      margin-top: 0px;
      display: flex;
      font-size: 13px;

      .edit-task.icon-unicon {
        opacity: 0;
        font-size: 14px;
        line-height: normal !important;
        top: 2px;
        position: relative;
        margin-left: 4px !important;
      }
      &:hover {
        .edit-task {
          opacity: 1;
        }
      }
      .checkbox {
        top: 0px;
        position: relative;
        margin-right: 8px;
      }
      span {
        top: 2px;
        position: relative;
        cursor: pointer;
      }
      .trash.icon-unicon,
      .edit-task.icon-unicon {
        cursor: pointer;
        line-height: 24px;
        margin-left: 8px;
        &:hover {
          color: $primary;
          &.trash {
            color: $red;
          }
        }
      }
    }
  }
}
